<template>
  <div id="app">
    <header-view v-if="flagShow"></header-view>
    <router-view />
    <footer-view v-if="flagShow"></footer-view>
  </div>
</template>

<script>
import HeaderView from './components/HeaderView.vue' // 导入header组件
import FooterView from './components/FooterView.vue' // 导入header组件
export default {
  data() {
    return {
      flagShow: true
    }
  },
  watch: {
    $route: {
      // handler为监听到数据变化时所执行的函数，函数接收两个参数：新值和旧值。
      handler(val) {
        this.flagShow = val.meta.isShow || false
      },
      // immediate为true 表示在组件mounted时立即执行一次该函数
      immediate: true
    }
  },
  components: {
    HeaderView,
    FooterView
  }
}
</script>

<style lang="less" scoped>
</style>